<template>
  <div class="wrapper">
    <el-aside
      class="wrapper-aside"
      @mouseenter="handleDivMouseEnter"
      @mouseleave="handleDivMouseLeave"
      :class="[ collapsed ? 'wrapper-aside-coll' : '', isMoving ? 'move-right' : '']"
    >
      <!-- 侧边栏内容 -->
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
      >
        <el-menu-item
          :index="index + 1"
          @click="selectMenu(index + 1)"
          v-for="(item, index) in props.menuInfo"
          :key="index"
        >
          <template #title>
            <router-link :to="`/${menuName}/${item.component}`">
            <span class="menu-text">{{item.name}}</span>
            <i
              v-show="isActive(index + 1)"
              class="menu-icon"
            ></i>
          </router-link>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- el-icon是两个伸缩打开的图标 -->
    <el-icon
      @click="toggleCollapse"
      v-show="!collapsed"
      class="indent-icon"
    ></el-icon>
    <el-icon
      @click="toggleCollapse"
      v-show="collapsed"
      class="indent-icon-right"
      @mouseenter="handleIconMouseEnter"
      @mouseleave="handleIconMouseLeave"
    ></el-icon>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// nameEvent：二级当前菜单名称   collapsedEvent：侧边栏伸缩
const emit = defineEmits(['nameEvent', 'collapsedEvent'])

interface MenuItem {
  name: string;
  component: string;
}

const props = defineProps<{
  menuInfo: MenuItem[];
  menuName: string;
}>();

const activeMenu = ref(1);
// 当前显示的菜单名称
let activeMenuName = props.menuInfo[0].name;

const selectMenu = (menu) => {
  activeMenu.value = menu;
  activeMenuName = props.menuInfo[menu - 1].name;
  // 触发当前名称
  emit('nameEvent', activeMenuName);
};

const isActive = (index) => {
  return activeMenu.value === index;
};

// 与侧边栏相关
const collapsed = ref(false);
const isMoving = ref(false);
let resetTimer = null;

const toggleCollapse = () => {
  collapsed.value = !collapsed.value;
  // 触发当前名称
  emit('collapsedEvent', collapsed.value);
};

const handleIconMouseEnter = () => {
  isMoving.value = true;
};

const handleIconMouseLeave = () => {
  resetTimer = setTimeout(() => {
    isMoving.value = false;
  }, 1000);
};

const handleDivMouseEnter = () => {
  clearTimeout(resetTimer);
};

const handleDivMouseLeave = () => {
  handleIconMouseLeave();
};
 
</script>

<style scoped>
.wrapper {
  display: flex;
  height: 100%;
  position: relative;
}

.el-aside {
  /* background: var(--side-background); */
  background: #E3EFF7;
  border: 1px solid #979797;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}

.wrapper-aside {
  width: 160px;
  z-index: 11;
}
.wrapper-aside-coll {
  width: 160px;
  height: 790px;
  margin: 38px 0 0 14px;
  border: 1px solid #1a1616;
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  /* background: var(--side-background); */
  background: #E3EFF7;
  z-index: 11;
  position: absolute;
  left: -180px;
  transition: left 1s;
}
.move-right {
  left: 5px;
}

.sidebar-menu {
  width: 100%;
}

.wrapper .indent-icon {
  width: 21px;
  height: 19px;
  background: url('@/assets/home/aside_icon_left.png');
  position: absolute;
  left: 125px;
  bottom: 9px;
  z-index: 11;
  cursor: pointer;
}
.wrapper .indent-icon-right {
  width: 15px;
  height: 13px;
  background: url('@/assets/home/aside_icon_right.png');
  position: absolute;
  left: 18px;
  top: 12px;
  z-index: 11;
  cursor: pointer;
}

.wrapper :deep(.el-menu) {
  background: none;
}
.wrapper :deep(ul li) {
  width: 158px;
  font-size: 16px;
  font-weight: 350;
  color: #000000;
  font-family: DINPro;
  height: 56px;
  display: inline-block;
  text-align: center;
}
.wrapper :deep(ul li a) {
  color: inherit;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.wrapper :deep(ul li.is-active),
.wrapper :deep(ul li:hover) {
  position: relative;
  color: rgba(252, 249, 249, 1);
  background: rgba(33, 150, 243, 1);
  /* background: var(--side-active-background); */
}
.wrapper :deep(ul li i) {
  contain: '';
  position: absolute;
  width: 9px;
  height: 12px;
  right: 20px;
  top: 22px;
  background: url('@/assets/home/arrow_right_icon.png') no-repeat;
}
</style>
